<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: MOZZ
  Date: 2021/12/14
  Time: 17:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--获取参数--%>
<c:set var="blog" scope="request" value="${requestScope.blog}"/>
<c:set var="targetUser" value="${blog.user}"/>
<c:set var="user" scope="session" value="${sessionScope.user}"/>
<html>

<head>
    <title>${blog.title}</title>
    <link rel="stylesheet" href="public/css/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="public/css/blog_detail.css">
    <link rel="stylesheet" href="public/css/iconfont.css">
    <link rel="stylesheet" href="public/css/markdown.css">
    <link rel="stylesheet" href="public/css/layout/header.css">
</head>

<body>
<div class="tar-bar">
    <div class="left-box">
        <div class="menu-item">
            <a href="codeBlog"><span class="iconfont icon-home"></span>首页</a>
        </div>
        <div class="menu-item">
            <a href="timeline.jsp?userId=${user.id}"><span class="iconfont icon-time-line"></span>时间轴</a>
        </div>
        <div class="menu-item">
            <a href="TagsServlet"><span class="iconfont icon-tag"></span>标签</a>
        </div>
        <div class="menu-item">
            <span class="iconfont icon-about"></span> 关于
        </div>
    </div>
    <div class="right-box">
        <div class="menu-item">
            <a href="CategoryServlet?userId=${user.id}"><span class="iconfont icon-folder-open"></span>分类</a>
        </div>
        <c:if test="${user!=null}">
            <div class="menu-item">
                <!-- <span><a href="UserHomeServlet?userId=${user.id}"><c:out value="${user.nickName}"/></a></span>
                <div class="avatar-box">
                    <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
                </div> -->
                <a href="UserHomeServlet?userId=${user.id}"><span class="iconfont icon-user"></span>个人中心</a>
            </div>
        </c:if>
        <c:if test="${user==null}">
            <div class="menu-item">
                <a href="login.jsp">
                    <button class="btn btn-success">登录</button>
                </a>
            </div>
        </c:if>
        <div class="menu-item public-btn">
            <a href="add_blog.jsp">
                <button class="btn">发表博客</button>
            </a>
        </div>
    </div>
</div>
<div class="banner">
    <c:if test="${blog.cover != null}">
        <div class="banner-bg" style="background: url(uploads/cover/${blog.cover}) no-repeat center/cover;"></div>
    </c:if>
    <c:if test="${blog.cover == null}">
        <div class="banner-bg"></div>
    </c:if>
    <div class="flex-center">
        <div class="blog-info">
            <div class="blog-title">${blog.title}</div>
            <div class="blog-detail">
                <div class="blog-date">
                    <fmt:formatDate type="both" value="${blog.publicTime}"/>
                </div>
                <span>|</span>
                <div class="blog-username">${blog.user.nickName}</div>
                <span>|</span>
                <div class="tags-box">
                    <c:forEach items="${blog.tags}" var="tag">
                        <div class="tag"><span class="iconfont icon-tag"></span><a
                                href="TagsServlet?tagId=${tag.id}">${tag.name}</a></div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container main-box">
    <c:if test="${targetUser != null}">
        <div class="info-box">
            <div id="user-box">
                <div class="avatar-box">
                    <img class="avatar" src="uploads/avatar/${targetUser.avatar}" alt="">
                </div>
                <div class="username">
                        ${targetUser.nickName}
                </div>
                <div class="email">
                        ${targetUser.email}
                </div>
                <div class="status-box">
                    <div class="status-item">
                        <div class="status-item-name">动态</div>
                        <div class="status-count">${targetUser.blogCount}</div>
                    </div>
                    <div class="status-item">
                        <div class="status-item-name">收藏</div>
                        <div class="status-count">${targetUser.collectionCount}</div>
                    </div>
                    <div class="status-item">
                        <div class="status-item-name">关注</div>
                        <div class="status-count">${targetUser.subscribeCount}</div>
                    </div>
                </div>
                <c:if test="${user!=null}">
                    <div class="subscribe-btn-box">
                        <button onclick="subscribeUser()" id="subscribe-btn"
                                class="btn btn-success">关注用户
                        </button>
                    </div>
                </c:if>
            </div>
            <div class="sticky-top">
                <div class="catalogue-box">
                    <div class="box-title">目录</div>
                </div>
                <div class="category-box">
                    <div class="box-title">博客分类</div>
                    <c:if test="${targetUser.categories.size()==0}">
                        <c:out value="暂无分类"/>
                    </c:if>
                    <c:if test="${targetUser.categories.size()>0}">
                        <c:forEach var="category" items="${targetUser.categories}">
                            <div class="category-item">
                                <div class="category-name"><a
                                        href="CategoryServlet?categoryId=${category.id}&userId=${user.id}">${category.categoryName}</a>
                                </div>
                                <div class="category-count">${category.count}</div>
                            </div>
                        </c:forEach>
                    </c:if>
                </div>
            </div>
        </div>
    </c:if>

    <div id="markdown-box">
        ${blog.content}
    </div>
</div>
</div>
<c:if test="${user!=null}">
    <div class="tool-mask">
        <button class="btn btn-primary" onclick="collectionBlog()" id="collection-btn">收藏文章</button>
    </div>
</c:if>
</body>
<script src="public/js/jquery/jquery.js"></script>
<script>
    let userId = '${user.id}'
    let targetUserId = '${targetUser.id}'
    let blogId = '${blog.id}'
    let subscribeFlag = true
    let collectionFlag = true
    $(function () {
        buildCatalogue()
    })
    // 初始化用户状态：初始化关注状态
    $(function () {
        if ('${user.id}' !== '') {
            $.ajax({
                url: 'QueryBlogStatusServlet',
                dataType: 'json',
                data: {
                    userId,
                    blogId,
                    targetId: targetUserId
                },
                success: result => {
                    console.log(result)
                    // 改变样式
                    changeCollection(result.collection)
                    changeSubscribe(result.subscribe)
                },
                error: error => {
                    console.log(error)
                }
            })
        }
    });


    // 关注用户
    function subscribeUser() {
        if (userId == targetUserId) {
            alert("不能关注自己哦")
            return
        }
        // 发送ajax请求
        $.ajax({
            url: 'SubscribeUserServlet',
            data: {
                userId,
                targetUserId,
                flag: subscribeFlag
            },
            dataType: "text",
            success: result => {
                console.log(result)
                if (result == 'success') {
                    // 改变样式
                    changeSubscribe(!subscribeFlag)
                }
            },
            error: err => {
                console.log(err)
            }
        })
    }

    // 收藏文章
    function collectionBlog() {
        let blogId = '${blog.id}'
        // 发送ajax请求
        $.ajax({
            url: 'CollectionBlogServlet',
            data: {
                userId,
                blogId,
                flag: collectionFlag
            },
            dataType: "text",
            success: result => {
                console.log(result)
                if (result == 'success') {
                    // 改变样式
                    changeCollection(!collectionFlag)
                }
            },
            error: err => {
                console.log(err)
            }
        })
    }

    // 已收藏，改变样式
    function changeCollection(flag) {
        collectionFlag = flag
        if (flag == true) {
            $("#collection-btn").removeClass("btn-primary")
            $("#collection-btn").text("已收藏")
        } else {
            $("#collection-btn").addClass("btn-primary")
            $("#collection-btn").text("收藏文章")
        }
    }

    // 已关注，改变样式
    function changeSubscribe(flag) {
        subscribeFlag = flag
        if (flag == true) {
            console.log($("#subscribe-btn"))
            $("#subscribe-btn").removeClass("btn-success")
            $("#subscribe-btn").text("已关注")
        } else {
            $("#subscribe-btn").addClass("btn-success")
            $("#subscribe-btn").text("关注")
        }
    }

    // 生成左侧链接
    function buildCatalogue() {
        // 获取所有的a标签
        $("#markdown-box a").each(function () {
            console.log($(this).attr('href'))
            $("#markdown-box a[href='" + $(this).attr('href') + "']").attr("id", $(this).attr("name"))
            console.log($(this))
            let aDom = $(this)
            $(this).attr("id", $(this).attr("id"))
            let aHref = aDom.attr('href')
            let aName = aDom.attr('name')
            let html = $('<div class="catalogue-item "><div class="catalogue-name"><a class="link" href="' + aHref +
                '">' + aName + '</a></div></div>')
            $(".catalogue-box").append(html)
        })
        $(".link").click(function () {
            console.log($($.attr(this, 'href')))
            $('html, body').animate({
                scrollTop: $($.attr(this, 'href')).offset().top
            }, 500);
            return false;
        });
    }
</script>

</html>